
<script setup lang="ts">
interface PropsType {
  data: UI.FuncTree;
}
const props = defineProps<PropsType>();
</script>

<template>
  <template v-for="func in props.data" :key="func.func_id">
    <el-sub-menu v-if="func.func_key === ''" :index="`${func.func_id}`">
      <template #title>
        <span>{{ func.func_name }}</span>
      </template>
      <template v-if="typeof func.children !== 'undefined'">
        <home-menu-content :data="func.children" />
      </template>
    </el-sub-menu>
    <el-menu-item v-else :index="`/${func.func_key}`">{{
      func.func_name
    }}</el-menu-item>
  </template>
</template>


<style scoped lang="scss">
.el-sub-menu {
  background-color: #48a3c4;
  /* color: #fff;
  font-size: 20px; */
  span{
     color: #8B4513;
     font-weight: 700;
  font-size: 20px;
  }
}
.el-menu-item {
  background-color: #48a3c4;
  color: #fff;
  font-size: 18px;
}
</style>